<template>
  <el-dialog
    top="5vh"
    width="75%"
    height="75%"
    title="商品详情"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="detail"
  >
    <div class="detailBox">
      <!-- 基本信息 -->
      <el-divider content-position="left" class="divider">基本信息</el-divider>
      <el-form class="baseBox">
        <el-form-item label="所属分类" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            v-model="data.info.categoryBreadcrumbName"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="data.info.name"></el-input>
        </el-form-item>
        <el-form-item label="商品标题" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="data.info.title"></el-input>
        </el-form-item>
        <el-form-item
          label="商品价格"
          :label-width="formLabelWidth"
          v-if="!data.hasSaleAttrs"
        >
          <el-input disabled v-model="data.skuList[0].price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="商品库存"
          :label-width="formLabelWidth"
          v-if="!data.hasSaleAttrs"
        >
          <el-input disabled v-model="data.skuList[0].stockNum"></el-input>
        </el-form-item>
      </el-form>

      <!-- 图片信息 -->
      <el-divider
        v-if="data.images && data.images.length > 0"
        content-position="left"
        class="divider"
        >图片信息</el-divider
      >
      <ul
        class="imageBox el-upload-list el-upload-list--picture-card"
        v-if="data.images && data.images.length > 0"
      >
        <li
          class="el-upload-list__item is-success"
          v-for="(item, index) in data.images"
          :key="index"
        >
          <img :src="item.url" class="el-upload-list__item-thumbnail" />
        </li>
      </ul>

      <!-- 规格参数 -->
      <el-divider
        v-if="data.groupAttrs && data.groupAttrs.length > 0"
        content-position="left"
        class="divider"
        >规格参数</el-divider
      >
      <table class="attrBox">
        <tbody v-for="(group, groupIndex) in data.groupAttrs" :key="groupIndex">
          <tr>
            <td :rowspan="group.attrs.length" class="group">
              {{ group.name }}
            </td>
            <td>
              {{ group.attrs[0].name }}
            </td>
            <td>
              {{ group.attrs[0].value }}
            </td>
          </tr>
          <tr
            v-for="(attr, attrIndex) in group.attrs.slice(1)"
            :key="attrIndex"
          >
            <td>
              {{ attr.name }}
            </td>
            <td>
              {{ attr.value }}
            </td>
          </tr>
        </tbody>
      </table>

      <!-- sku信息 -->
      <el-divider
        v-if="data.hasSaleAttrs"
        content-position="left"
        class="divider"
        >sku信息</el-divider
      >
      <el-form class="skuBox">
        <el-table
          class="skuTableBox"
          border=""
          :data="data.skuList"
          style="width: 100%"
          :span-method="arraySpanMethod"
          :cell-class-name="tableCellClassName"
          v-if="data.hasSaleAttrs"
        >
          <el-table-column prop="skuAttrList" label="销售版本" width="240">
            <template slot-scope="scope">
              <div v-if="scope.$index % 2 == 0">
                <span
                  class="combineName"
                  v-for="(skuAttr, skuAttrIndex) in scope.row.skuAttrList"
                  :key="skuAttrIndex"
                >
                  <el-tag>{{ skuAttr.attrName }}</el-tag>
                  {{ skuAttr.attrValue }}
                </span>
              </div>
              <div v-if="scope.$index % 2 != 0">
                <!-- 图片列表及活动设置 -->
                <div class="otherBox">
                  <el-collapse>
                    <el-collapse-item title="图片列表及活动信息">
                      <SpuUpload
                        :previewMode="true"
                        :imageList="scope.row.skuImageList"
                      />
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品标题">
            <template slot-scope="scope">
              <el-input
                disabled
                v-model="data.skuList[scope.$index].title"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品价格" width="150">
            <template slot-scope="scope">
              <el-input disabled v-model="data.skuList[scope.$index].price">
                <template slot="append">元</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品库存" width="100">
            <template slot-scope="scope">
              <el-input
                disabled
                v-model="data.skuList[scope.$index].stockNum"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 描述信息 -->
      <el-divider
        v-if="data.descs && data.descs.length > 0"
        content-position="left"
        class="divider"
        >描述信息</el-divider
      >
      <div class="descBox">
        <div class="image" v-for="(image, index) in data.descs" :key="index">
          <el-image :src="image.url" fit="fill"></el-image>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import SpuUpload from "./components/spuUpload.vue";

import productApi from "@/api/productApi";
import serviceUtils from "@/utils/serviceUtils";

export default {
  name: "spuDetail",
  components: {
    SpuUpload,
  },
  data() {
    return {
      // 弹窗标题
      title: "",
      // 弹窗显示标志
      dialogVisible: false,
      formLabelWidth: "80px",
      // 商品数据
      data: {
        info: {
          categoryName: "",
          name: "",
          title: "",
        },
        images: [],
        skuList: [
          {
            title: "",
            price: null,
            stockNum: null,
          },
        ],
        hasSaleAttrs: false,
      },
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 != 0) {
        if (columnIndex === 0) {
          return [1, 4];
        } else if (columnIndex > 0) {
          return [0, 0];
        }
      }
    },
    // 修改样式
    tableCellClassName(cel) {
      if (cel.rowIndex % 2 != 0) {
        return "customRow";
      }
    },
    // 请求商品详情数据
    remoteData(row) {
      const loading = serviceUtils.loading(".el-dialog");
      productApi.spu
        .info(row.id)
        .then((res) => {
          loading.close();
          this.data = res.data;
          this.initTableData(res.data);
          this.initBaseAttrs(res.data);
        })
        .catch((error) => {
          loading.close();
        });
    },
    // 商品sku表格
    initTableData(data) {
      var skuList = JSON.parse(JSON.stringify(data.skuInfos));
      this.data.skuList = [];

      var newSkuList = [];
      skuList.forEach((sku) => {
        newSkuList.push(sku);
        newSkuList.push(sku);
      });

      this.data.skuList = newSkuList;
      this.data.hasSaleAttrs = data.hasSaleAttrs;
    },
    // 初始化规格参数
    initBaseAttrs(data) {
      var result = [];
      data.groupAttrs.forEach((attrGroup) => {
        var newAttrGroup = [];
        var newAttrs = [];
        var hasContent = false;
        attrGroup.attrs.forEach((attr) => {
          // 没有填写内容的attr不保存
          if (attr.value != null && attr.value != "") {
            hasContent = true;
            newAttrs.push(attr);
          }
        });
        if (hasContent) {
          newAttrGroup = JSON.parse(JSON.stringify(attrGroup));
          newAttrGroup.attrs = JSON.parse(JSON.stringify(newAttrs));
          result.push(newAttrGroup);
        }
      });

      this.data.groupAttrs = result;
    },
    // 打开页面
    open(row) {
      this.showDialog(true);
      this.remoteData(row);
    },
    // 是否显示弹窗
    showDialog(flag) {
      this.dialogVisible = flag;
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .detailBox {
    overflow: auto;
    height: 70vh;
    padding: 0px 30px 0px 30px;
    .divider {
      margin: 50px 0px 30px 0px;
      background-color: #409eff;
      .el-divider__text {
        color: #409eff;
        font-weight: bold;
      }
    }
    .divider:first-child {
      margin-top: 20px;
    }
    .combineName {
      display: block;
      margin-bottom: 5px;
      margin-right: 20px;
      .el-tag {
        margin-right: 5px;
      }
    }
    .combineSingleName {
      .el-tag {
        margin-right: 5px;
      }
    }
    .imageBox {
      display: block;
      margin-top: 50px;
    }
    .descBox {
      width: 751px;
      border: 1px solid #eee;
      padding-left: 10px;
      .image {
        position: relative;
        border: 1px solid #fff;
        .el-image {
          width: 750px;
        }
      }
    }
    .attrBox {
      border-collapse: collapse;
      width: 70%;
      .group {
        width: 80px;
        text-align: center;
      }
      td {
        margin: 0;
        border: 1px solid #efefef;
        padding: 10px 20px;
      }
    }
    .skuBox {
      margin-top: 20px;
      .otherBox {
        :deep(.el-collapse) {
          border: none;
        }
        :deep(.el-collapse-item__header) {
          justify-content: flex-end;
          border-bottom: none;
          .el-collapse-item__arrow {
            margin: 0px 0px 0px 10px;
          }
        }
        :deep(.el-collapse-item__wrap) {
          border-bottom: none;
        }
      }
      :deep(.customRow) {
        padding: 0;
        .cell {
          padding: 0;
          .el-collapse-item__header {
            padding: 0px 10px;
          }
          .el-collapse-item__wrap {
            padding: 0px 10px;
          }
        }
      }
    }
  }
}
</style>